CSS emとremの違い

Note

CSS のサイズを表す単位emとremの違いについて

<html>
  <p><span></span></p>
</html>

emは親要素のサイズを基準にする。

html {
 font-size: 32px;
}

{
 font-size: 2em; /* -> 64px; */
}

span {
 font-size: 0.5em; /* -> 32px; */
}

remはルートのサイズを基準にする -> (root em)

html {
 font-size: 32px;
}

p {
 font-size: 2em; /* -> 64px; */
}

span {
 font-size: 0.5em; /* -> 16px; */
}

Tip

remの方が扱いやすいのでremを使おう！ emの場合、ネストしてくると訳からなくなる！